<template>
  <div class="page has-navbar" v-nav="{title: '数据分析', showBackButton: true}">
    <div class="page-content padding-top">
      <div class="tab-box">
        <span v-bind:class="{ 'on': !isOn}" @click="showTotal()">全平台数据</span>
        <span v-bind:class="{ 'on': isOn}" @click="showMarket()">本交易市场数据</span>
      </div>
      <div class="show-warp">
        <div class="show-list">
          <div class="show-title">总览</div>
          <div class="show-box">
            <p><a @click="totalDetial()">更多数据</a></p>
            <div id="total">
              <div class="total-list" style="border-bottom:1px solid #e1e1e1;border-right:1px solid #e1e1e1">
                <div class="title">总成交量</div>
                <div class="num"><span class="num-v">{{res.totalSaleInfo.saleNum}}</span><span class="num-u">台</span></div>
              </div>
              <div class="total-list" style="border-bottom:1px solid #e1e1e1">
                <div class="title">总成交额</div>
                <div class="num"><span class="num-v">{{res.totalSaleInfo.saleVolume}}</span><span class="num-u">元</span></div>
              </div>
              <div class="total-list" style="border-right:1px solid #e1e1e1">
                <div class="title">昨日成交量</div>
                <div class="num"><span class="num-v">{{res.yesterdaySaleInfo.saleNum}}</span><span class="num-u">台</span></div>
              </div>
              <div class="total-list">
                <div class="title">昨日成交额</div>
                <div class="num"><span class="num-v">{{res.yesterdaySaleInfo.saleVolume}}</span><span class="num-u">元</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="show-list">
          <div class="show-title">畅销品牌</div>
          <div class="show-box">
            <p><a @click="brandDetial()">更多数据</a></p>
            <div id="brand"></div>
            
          </div>
        </div>
        <div class="show-list">
          <div class="show-title">畅销车型</div>
          <div class="show-box">
            <p><a @click="modelDetial()">更多数据</a></p>
            <div id="model" ></div>
            
          </div>
        </div>
        <div class="show-list">
          <div class="show-title">畅销价格</div>
          <div class="show-box">
            <p><a @click="priceDetial()">更多数据</a></p>
            <div id="price" ></div>
            
          </div>
        </div>

        <div class="show-list">
          <div class="show-title">畅销颜色</div>
          <div class="show-box">
            <p><a @click="colorDetial()">更多数据</a></p>
            <div id="color"></div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'show',
  data () {
    return {
      res:{
        totalSaleInfo:{},
        yesterdaySaleInfo:{},
      },
      isOn:false,


      brandCharts:null,

      modelCharts:null,

      colorCharts:null,

      priceCharts:null,



      
      


    }
  },
  created(){
    this.showTotal();
  },
  mounted(){
    var color= ['#f56e6d', '#ffaa07', '#3186dc', '#43d7e0','#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
    
    this.brandCharts = echarts.init(document.getElementById('brand'));
    // 绘制图表
    this.brandCharts.setOption({
        // title: { text: this.title },
        tooltip: {},
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }],
        color:['#ff6816']
    });

    this.modelCharts = echarts.init(document.getElementById('model'));
    // 绘制图表
    this.modelCharts.setOption({
        // title: { text: 'ECharts 入门示例' },
        tooltip: {},
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }],
        color:['#ff6816'],
    });

    this.priceCharts = echarts.init(document.getElementById('price'));
    // 绘制图表
    this.priceCharts.setOption({
        // title: { text: 'ECharts 入门示例' },
        tooltip: {},
        // xAxis: {
        //     data: ["大众","别克","本田","丰田"]
        // },
        // yAxis: {},
        series: [{
            name: '销量',
            type: 'pie',
            data: [],
            // roseType: 'radius',
            color:color,
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }]
    });

    this.colorCharts = echarts.init(document.getElementById('color'));
    // 绘制图表
    this.colorCharts.setOption({
        // title: { text: 'ECharts 入门示例' },
        tooltip: {},
        series: [{
            name: '销量',
            type: 'pie',
            data: [],
            // roseType: 'radius',
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }],
        color:color
    });

  },
  methods:{
    totalDetial(){
      this.$router.forward('/show/totalDetial');
    },
    brandDetial(){
      this.$router.forward('/show/brandDetial');
    },
    priceDetial(){
      this.$router.forward('/show/priceDetial');
    },
    modelDetial(){
      this.$router.forward('/show/modelDetial');
    },
    colorDetial(){
      this.$router.forward('/show/colorDetial');
    },
    showMarket(){


      // 基于准备好的dom，初始化echarts实例
      // console.log()
      sess.set('showMarketId',sess.get('userSession').marketId);
      this.isOn = true;
      var _this = this;
      axios.get(baseUrl+'/controller/statis/app/getOutline',{params:{
          marketId:sess.get('userSession').marketId,
        }
      })
      .then((response)=>{
          _this.res = response.data.result;

          var brandTitleArr = [];
          var brandDataArr = [];
          for (var i = 0; i < _this.res.brandRankInfo.length; i++) {
            brandTitleArr.push(_this.res.brandRankInfo[i].brandName);
            brandDataArr.push(_this.res.brandRankInfo[i].saleNum) 
          }
          _this.brandCharts.setOption({
            xAxis: {
                data: brandTitleArr
            },
            series: [{
                data: brandDataArr
            }],

          });


          var modelTitleArr = [];
          var modelDataArr = [];
          for (var i = 0; i < _this.res.modelRankInfo.length; i++) {
            modelTitleArr.push(_this.res.modelRankInfo[i].modelName);
            modelDataArr.push(_this.res.modelRankInfo[i].saleNum) 
          }
          _this.modelCharts.setOption({
            xAxis: {
                data: modelTitleArr
            },
            series: [{
                data: modelDataArr
            }],

          });



          var colorDataArr = [];
          for (var i = 0; i < _this.res.colorRankInfo.length; i++) {
            colorDataArr.push({value:_this.res.colorRankInfo[i].saleNum,name:_this.res.colorRankInfo[i].carColor});
          }
          _this.colorCharts.setOption({
            series: [{
                data: colorDataArr
            }],

          });



          var priceDataArr = [];
          for (var i = 0; i < _this.res.priceRankInfo.length; i++) {
            priceDataArr.push({value:_this.res.priceRankInfo[i].saleNum,name:_this.res.priceRankInfo[i].priceRemark});
          }
          _this.priceCharts.setOption({
            series: [{
                data: priceDataArr
            }],

          });



      })
      .catch((err)=>{
        // Indicator.close();
        // this.$toast({ message: '服务器错误', position: 'bottom', duration: 2000 })
          console.log('error:'+err.data);
      })
    },
    showTotal(){
      this.isOn = false;
      sess.set('showMarketId',1);
      var _this = this;
      axios.get(baseUrl+'/controller/statis/app/getOutline',{
        params:{
          marketId:1,
        }
      })
      .then((response)=>{
          _this.res = response.data.result;


          // console.log(this.res);
          var brandTitleArr = [];
          var brandDataArr = [];
          for (var i = 0; i < _this.res.brandRankInfo.length; i++) {
            brandTitleArr.push(_this.res.brandRankInfo[i].brandName);
            brandDataArr.push(_this.res.brandRankInfo[i].saleNum) 
          }
          _this.brandCharts.setOption({
            xAxis: {
                data: brandTitleArr
            },
            series: [{
                data: brandDataArr
            }],

          });


          var modelTitleArr = [];
          var modelDataArr = [];
          for (var i = 0; i < _this.res.modelRankInfo.length; i++) {
            modelTitleArr.push(_this.res.modelRankInfo[i].modelName);
            modelDataArr.push(_this.res.modelRankInfo[i].saleNum) 
          }
          _this.modelCharts.setOption({
            xAxis: {
                data: modelTitleArr
            },
            series: [{
                data: modelDataArr
            }],

          });



          var colorDataArr = [];
          for (var i = 0; i < _this.res.colorRankInfo.length; i++) {
            colorDataArr.push({value:_this.res.colorRankInfo[i].saleNum,name:_this.res.colorRankInfo[i].carColor});
          }
          _this.colorCharts.setOption({
            series: [{
                data: colorDataArr
            }],

          });



          var priceDataArr = [];
          for (var i = 0; i < _this.res.priceRankInfo.length; i++) {
            priceDataArr.push({value:_this.res.priceRankInfo[i].saleNum,name:_this.res.priceRankInfo[i].priceRemark});
          }
          _this.priceCharts.setOption({
            series: [{
                data: priceDataArr
            }],

          });



      })
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.show-warp{
  padding: 1rem;
  /*background-color: #f3f3f3;*/
}
.show-list{
  margin-bottom: 10px;
}
.show-title{
  line-height: 35px;
  font-size: 14px;

}
.show-box{
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
}
.show-box p{
 text-align: right;
 line-height: 30px;
 
}
.show-box p a{
 text-decoration: none;
 font-size: 12px;
 color:#989898;/*
 background-image: url(../../static/images/arrow-r@3x.png);*/
 background-repeat: no-repeat;
 background-size: 12px;
 background-position: 100% 44%;
 padding-right: 15px;
 display: inline-block;

}
#total{
  height: 200px;
}
#total .total-list{
  width: 50%;
  box-sizing: border-box;
  height: 100px;
  float: left;
  text-align: center;
  padding: 20px 0;
  font-size: 15px;
  line-height: 30px;
}
#total .num{
  font-size: 18px;
  color:#ff6816; 
} 
#brand,#model{
  height: 30rem;

}
#color,#price{
  height: 30rem;
  padding: 2rem 0;
}
.tab-box{
  text-align: center;
  line-height: 50px;
  height: 51px;
  background-color: #fff;
  border-bottom: 1px solid #e1e1e1;
  font-size: 14px;
}
.tab-box span{
  box-sizing: border-box;
  width: 50%;
  display: inline-block;
  height: 50px;
  float: left;
  border-bottom:4px solid #fff;
}
.tab-box span.on{
  border-bottom:4px solid #ff6816;

}
</style>
